<template>
  <el-table
    ref="table"
    :size="issize"
    border
    :header-cell-style="{ 'text-align': 'center', background: '#f5f5f5' }"
    v-loading="loading"
    height="calc(100% - 1px)"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :highlight-current-row="ishighlight"
    @current-change="handleCurrentChange"
    :data="tableData"
  >
    <template slot="empty">
      <el-empty description="暂无数据"></el-empty>
    </template>
    <slot name="position"></slot>
    <el-table-column
      v-for="(item, index) in tableConfig"
      :key="index"
      :show-overflow-tooltip="item.showtooltip"
      :prop="item.prop"
      :label="item.label"
      :type="item.type"
      :align="item.center"
      :width="item.width"
      :min-width="item.minWidth"
      :formatter="item.formatter"
    >
      <template v-if="item.children">
        <el-table-column
          v-for="ele in item.children"
          :key="ele.prop"
          :prop="ele.prop"
          :label="ele.label"
          :width="ele.width"
        />
      </template>
    </el-table-column>
    <template>
      <!-- 插槽 自定义按钮 -->
      <slot></slot>
    </template>
  </el-table>
</template>
<script>
export default {
  name: 'GlobalTable',
  props: {
    // 传入的表格配置项
    tableConfig: {
      type: Array,
      default: () => []
    },
    // 传入的表格数据
    tableData: {
      type: Array
    },
    // 传入的表格间距调节字段
    issize: {
      type: String,
      default: 'medium'
    },
    ishighlight: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('handleSelection', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrent', val)
    },
    // 表格元素滚动
    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      divData.onmouseover = function () {
        clearInterval(t)
      } // 鼠标移入，停止滚动
      divData.onmouseout = function () {
        start()
      } // 鼠标移出，继续滚动
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动2像素)
      let t
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight > divData.scrollHeight) {
          return
        }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop >
            divData.scrollHeight - 1
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, 100)
      }
      start()
    }
  }
}
</script>
